<template>
    <!-- 双表联动 -->
    <div class="app-container">
        <el-row :gutter="30" :style="{height: '600px', width: '100%'}">
           <el-col :span="12">
                <div class="chart1" ref="chart1" :style="{height:'600px',width:'100%'}"></div>
           </el-col>
           <el-col :span="12">
                <div class="chart2" ref="chart2" :style="{height:'600px',width:'100%'}"></div>
           </el-col>
        </el-row>
    </div>
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from '@/views/dashboard/mixins/resize'

export default {
    name: 'ChartMix01',
    mixins: [resize],
    data() {
        return {
            chart1: null,
            chart2: null,
        }
    },
    mounted() {
        this.$nextTick(() => {
            this.initChart()
        })
    },
    beforeDestroy() {
        if (!this.chart) {
            return
        }
        this.chart.dispose()
        this.chart = null
    },
    methods: {
        initChart() {
            this.chart1 = echarts.init(this.$refs['chart1'], 'macarons')
            this.chart2 = echarts.init(this.$refs['chart2'], 'macarons')
            this.setOptions(this.chartData)
        },
        setOptions() {
            this.chart1.setOption({
                title: {
                    text: '某站点用户访问来源',
                    subtext: '纯属虚构',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br /> {b} : {c} ({d}%)'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
                },
                calculable: true,
                series: [
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', 225],
                        data: [
                            {
                                value: 335, name: '直接访问'
                            },
                            {
                                value: 310, name: '邮件营销'
                            },
                            {
                                value: 234, name: '联盟广告'
                            },
                            {
                                value: 135, name: '视频广告'
                            },
                            {
                                value: 1548, name: '搜索引擎'
                            },
                        ]
                    }
                ]
            });
            this.chart2.setOption({
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
                },
                toolbox: {
                    show: true,
                    oient: 'vertical',
                    y: 'center',
                    feature: {
                        mark: {show: true},
                        magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                        restore: {show: true},
                        saveAsImage: {show: true}
                    },
                },
                calculable: true,
                xAxis: [
                    {
                        type: 'category',
                        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        splitArea: {show: true}
                    }
                ],
                series: [
                    {
                        name: '直接访问',
                        type: 'bar',
                        stack: '总量', //组合名称，双数值轴时无效，多组数据的堆积图时使用，eg:stack:'goup1'
                                       //则series数组中stack值等于‘group1’的数据做堆积计算
                        data: [320, 332, 301, 334, 390, 330, 320]
                    },
                    {
                        name: '邮件营销',
                        type: 'bar',
                        stack: '总量', 
                        data: [120, 132, 101, 134, 90, 230, 210]
                    },
                    {
                        name: '联盟广告',
                        type: 'bar',
                        stack: '总量', 
                        data: [220, 182, 191, 234, 290, 330, 310]
                    },
                    {
                        name: '视频广告',
                        type: 'bar',
                        stack: '总量', 
                        data: [150, 232, 201, 154, 190, 330, 410]
                    },
                    {
                        name: '搜索引擎',
                        type: 'bar',
                        stack: '总量', 
                        data: [820, 932, 901, 934, 1290, 1330, 1320]
                    },
                ]
            })
            echarts.connect([this.chart1, this.chart2]) //关联
        }
    }
}
</script>